<template>
	<view class="plate-input-container">
		<view class="plate-boxes">
			<view 
				v-for="(item, index) in plateArray" 
				:key="index"
				class="plate-box"
				:class="{
					'active': currentIndex === index,
					'green': index === 6 && plateArray[0] && plateArray[1] && plateArray[2] && plateArray[3] && plateArray[4] && plateArray[5]
				}"
				@click="handleBoxClick(index)"
			>
				{{ item || '' }}
			</view>
		</view>
		
		<uni-popup ref="keyboardPopup" type="bottom">
			<view class="keyboard-container">
				<view class="keyboard-header">
					<text class="keyboard-title">车牌号输入</text>
					<text class="keyboard-close" @click="closeKeyboard">完成</text>
				</view>
				<view class="keyboard-content">
					<view class="keyboard-row" v-if="currentIndex === 0">
						<view 
							v-for="(province, index) in provinces" 
							:key="index"
							class="keyboard-key"
							@click="handleProvinceSelect(province)"
						>
							{{ province }}
						</view>
					</view>
					<view class="keyboard-row" v-else>
						<view 
							v-for="(key, index) in currentKeys" 
							:key="index"
							class="keyboard-key"
							@click="handleKeyPress(key)"
						>
							{{ key }}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name: 'PlateInput',
	data() {
		return {
			plateArray: ['', '', '', '', '', '', ''],
			currentIndex: 0,
			provinces: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新'],
			letters: 'ABCDEFGHJKLMNPQRSTUVWXYZ',
			numbers: '0123456789',
			lastProvince: ''
		}
	},
	computed: {
		currentKeys() {
			if (this.currentIndex === 0) {
				return this.provinces
			} else if (this.currentIndex === 1) {
				return this.letters.split('')
			} else if (this.currentIndex >= 2 && this.currentIndex <= 5) {
				return [...this.letters.split(''), ...this.numbers.split('')]
			} else {
				return this.numbers.split('')
			}
		}
	},
	created() {
		// 从本地存储获取上次选择的省份
		const lastProvince = uni.getStorageSync('lastProvince')
		if (lastProvince) {
			this.lastProvince = lastProvince
		}
	},
	methods: {
		handleBoxClick(index) {
			if (index === 6 && this.plateArray[0] && this.plateArray[1] && this.plateArray[2] && 
				this.plateArray[3] && this.plateArray[4] && this.plateArray[5]) {
				this.currentIndex = 6
				this.$refs.keyboardPopup.open()
			} else if (index < 6) {
				this.currentIndex = index
				this.$refs.keyboardPopup.open()
			}
		},
		handleProvinceSelect(province) {
			this.plateArray[0] = province
			this.lastProvince = province
			uni.setStorageSync('lastProvince', province)
			this.currentIndex = 1
			this.$emit('input', this.getPlateNumber())
		},
		handleKeyPress(key) {
			if (this.currentIndex < 6) {
				this.plateArray[this.currentIndex] = key
				this.currentIndex++
				this.$emit('input', this.getPlateNumber())
				
				if (this.currentIndex === 6) {
					this.$refs.keyboardPopup.close()
				}
			} else if (this.currentIndex === 6) {
				this.plateArray[6] = key
				this.$refs.keyboardPopup.close()
				this.$emit('input', this.getPlateNumber())
			}
		},
		closeKeyboard() {
			this.$refs.keyboardPopup.close()
		},
		getPlateNumber() {
			return this.plateArray.join('')
		},
		clear() {
			this.plateArray = ['', '', '', '', '', '', '']
			this.currentIndex = 0
			this.$emit('input', '')
		}
	}
}
</script>

<style lang="scss" scoped>
.plate-input-container {
	padding: 20rpx;
	background: white;
	border-radius: 10rpx;
}

.plate-boxes {
	display: flex;
	gap: 10rpx;
	justify-content: center;
}

.plate-box {
	width: 80rpx;
	height: 80rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
	
	&.active {
		border-color: #007AFF;
		background: #f0f7ff;
	}
	
	&.green {
		border-color: #4cd964;
		background: #f0fff0;
	}
}

.keyboard-container {
	background: #f5f5f5;
	padding: 20rpx;
	border-radius: 20rpx 20rpx 0 0;
}

.keyboard-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	
	.keyboard-title {
		font-size: 28rpx;
		color: #333;
	}
	
	.keyboard-close {
		font-size: 28rpx;
		color: #007AFF;
	}
}

.keyboard-content {
	padding: 20rpx;
}

.keyboard-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
	justify-content: center;
}

.keyboard-key {
	width: 80rpx;
	height: 80rpx;
	background: white;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	margin-bottom: 10rpx;
	
	&:active {
		background: #e0e0e0;
	}
}
</style> 